<div class="notice-container">
  <div class="container">
    <div class="notice-head">
      <div class="route">
        <span>
          <a [routerLink]="['/outer/dashboard']" class="breadcrumb">
            工作台
          </a>
          <b>
            <i nz-icon type="right" theme="outline"></i>
            公告
          </b>
        </span>
      </div>
      <div class="search">
        <button nz-button nzType="primary" *ngIf="status.pageAuthorty.SystemNotices" (click)="release()">发布公告</button>
        <nz-input-group nzSearch [nzSuffix]="suffixButton" style="width: 340px;margin-left: 25px;">
          <input maxlength="50" type="text" nz-input placeholder="请输入关键字" [(ngModel)]="findJson.filter">
        </nz-input-group>
        <ng-template #suffixButton>
          <button nz-button nzType="primary" (click)="search()" nzSearch>搜索</button>
        </ng-template>
      </div>
    </div>
    <div class="notice-body">
      <div class="body">
        <div class="body-head">
          <div nz-row nzType="flex" nzJustify="space-between">
            <div nz-col nzSpan="2" style="padding-left: 30px">序号</div>
            <div nz-col nzSpan="4">标题</div>
            <div nz-col nzSpan="2">发布人</div>
            <div nz-col nzSpan="2" style="text-align: center;">状态</div>
            <div nz-col nzSpan="4">创建时间</div>
            <div nz-col nzSpan="2">操作</div>
          </div>
        </div>
        <div class="body-list">
          <div nz-row nzType="flex" nzJustify="space-between" class="list" *ngFor='let item of notices;let i = index'>
            <div nz-col nzSpan="2" style="padding-left: 30px;">
              {{i+1}}
            </div>
            <div nz-col nzSpan="4" class="hidden-row" style="cursor: pointer;" (click)="details(item)">
              {{item.title}}
            </div>
            <div nz-col nzSpan="2">{{item.creatorUserName}}</div>
            <div nz-col nzSpan="2" *ngIf='statusShow' style="cursor: pointer;text-align: center;" [ngStyle]="item.style"
              (click)="details(item)">
              {{item.status|notice:'status'}}
            </div>
            <div nz-col nzSpan="2" *ngIf='!statusShow' style="cursor: pointer;text-align: center;">
              <nz-switch [ngModel]="item.show" nzCheckedChildren="显示" nzUnCheckedChildren="隐藏"
                (ngModelChange)="statusChange(item)"></nz-switch>
            </div>
            <div nz-col nzSpan="4">{{item.creationTime|dateTimePipe}}</div>
            <div nz-col nzSpan="2">
              <i nz-icon type="delete" theme="outline" class="icon-delete" (click)="deleteNotice(item.id)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <nz-pagination [nzPageSize]="findJson.maxResultCount" [nzPageIndex]="nzPageIndex" [nzTotal]="nzTotal"
          (nzPageIndexChange)="pageChange($event)" nzShowQuickJumper [nzShowTotal]="totalTemplate"></nz-pagination>
        <ng-template #totalTemplate let-total>
          共{{nzTotal}}条
        </ng-template>
      </div>
    </div>
  </div>
</div>


<!-- 发布 -->
<nz-modal [(nzVisible)]="isAddVisible" [nzTitle]="modalAddTitle" [nzContent]="modalAddContent"
  [nzFooter]="modalAddFooter" (nzOnCancel)="handleCancel()" nzWidth=800 [nzStyle]="{ top: '150px' }">
  <ng-template #modalAddTitle>
    发布公告
  </ng-template>

  <ng-template #modalAddContent>
    <div nz-row class="listFir">
      <div nz-col nzSpan=3>
        标题
      </div>
      <div nz-col nzSpan=21>
        <input maxlength="30" nz-input placeholder="请输入" style="width: 300px;" [(ngModel)]="addNoticeModel.title"> <span
          style="color:red;vertical-align: top;margin-left: 8px;">*</span>
      </div>
    </div>
    <div nz-row class="listSec">
      <div nz-col nzSpan=3>
        内容
      </div>
      <div nz-col nzSpan=21>
        <textarea nz-input rows="10" cols="100" [(ngModel)]="addNoticeModel.content" style="width: 95%"></textarea><span
          style="color:red;vertical-align: top;margin-left: 8px;">*</span>
      </div>
    </div>
    <div nz-row class="listSec">
      <div nz-col nzSpan=3>
        推送人员
      </div>
      <div nz-col nzSpan=21>
        <nz-select style="width: 80%;" nzPlaceHolder="组织结构选取" nzShowSearch nzAllowClear
          [(ngModel)]="addNoticeModel.organizationUnitId">
          <nz-option [nzValue]="item.id" [nzLabel]="item.displayName" *ngFor="let item of departments"></nz-option>
        </nz-select> <span style="color:red;vertical-align: top;margin-left: 8px;">*</span>
      </div>
    </div>
  </ng-template>

  <ng-template #modalAddFooter>
    <button nz-button nzType="primary" (click)="handleAddOk()" style="width: 150px">发布</button>
  </ng-template>
</nz-modal>

<!-- 详情 -->
<nz-modal [(nzVisible)]="isDetailsVisible" [nzTitle]="modalDetailsTitle" [nzContent]="modalDetailsContent"
  [nzFooter]="null" (nzOnCancel)="handleCancel()" nzWidth=60%>
  <ng-template #modalDetailsTitle>
    详情
  </ng-template>

  <ng-template #modalDetailsContent>
    <div class="model">
      <div class="title hidden-row">
        <b>{{appoint.title}}</b>
      </div>
      <div nz-row class="head">
        <div nz-col nzSpan=5>
          发布人：{{appoint.creatorUserName}}
        </div>
        <div nz-col nzSpan=8>
          发布时间：{{appoint.creationTime|dateTimePipe}}
        </div>
        <!-- <div nz-col nzSpan=5>
          推送人员：{{appoint.title}}
        </div> -->
      </div>
      <div class="content">
        <pre>{{appoint.content}} </pre>

      </div>
    </div>
  </ng-template>
</nz-modal>